<template>
	<view class="bottom-buttons">
		<view class="content-view">
			<view v-if="$slots.left" class="slot-left">
				<slot name="left" />
			</view>
			<view class="left-view" :style="[leftButtonStyle]" v-else>
				<view class="item-view" v-for="(item, index) in buttons" :key="index">
					<u-button @click="handleClickButton(index)" open-type="share" v-if="item.type == 'share'"
						:custom-style="customStyle">
						<viw class="item-content">
							<image class="image-view" :src="baseUrl + item.image"></image>
							<view class="text-view">{{ item.name }}</view>
						</viw>
					</u-button>
					<view class="item-content" v-else hover-class="u-hover-class" @click="handleClickButton(index)">
						<view class="image-view">
							<image :src="baseUrl + item.image"></image>
						</view>
						<view class="text-view">{{ item.name }}</view>
					</view>

				</view>
			</view>
			<view class="right-view" :style="[rightButtonStyle]">
				<view class="cancel-button" :style="[cancelButtonStyle]" hover-class="u-hover-class"
					@click="$u.throttle(handleClickCancel, 500)">{{
    cancelText
}}</view>
				<view class="sure-button" :style="[sureButtonStyle]" hover-class="u-hover-class"
					@click="$u.throttle(handleClickSure, 500)">{{ sureText
          }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		indexBaseUrl
	} from '@/utils/config.js';

	export default {
		props: {
			list: {
				type: Array,
				default () {
					return [{
							image: 'quxiaoshoucang@3x.png',
							name: '收藏'
						}
					]
				},
			},
			isCollection: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: '清空',
			},
			sureText: {
				type: String,
				default: '开始计算',
			},
			leftStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			rightStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			cancelStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			sureStyle: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				collection: false,
				buttons: []
			}
		},
		computed: {
			baseUrl() {
				return '/static/images/index/';
			},
			customStyle() {
				return {
					color: 'transparent',
					backgroundColor: 'transparent',
					width: '64rpx',
					height: '80rpx',
					padding: '0'
				}
			},
			leftButtonStyle() {
				let style = {};
				// 合并用户传递的按钮样式对象
				Object.assign(style, this.leftStyle);
				return style;
			},
			rightButtonStyle() {
				let style = {};
				// 合并用户传递的按钮样式对象
				Object.assign(style, this.rightStyle);
				return style;
			},
			cancelButtonStyle() {
				let style = {};
				// 合并用户传递的按钮样式对象
				Object.assign(style, this.cancelStyle);
				return style;
			},
			sureButtonStyle() {
				let style = {};
				// 合并用户传递的按钮样式对象
				Object.assign(style, this.sureStyle);
				return style;
			},
		},
		watch: {
			isCollection(val) {
				this.collection = val
				this.chageImage()
			},
			list: {
				handler(val, oldVal) {
					this.buttons = val
				},
				deep: true
			}
		},
		created() {
			this.buttons = this.list
		},
		mounted() {
			this.collection = this.isCollection
			this.chageImage()
		},
		methods: {
			handleClickButton(index) {
				if (index == 0) {
					this.collection = !this.collection
					this.chageImage()
				}
				this.$emit('select', index)
			},
			handleClickCancel(index) {
				this.$emit('cancel', index)
			},
			handleClickSure(index) {
				this.$emit('sure', index)
			},
			chageImage() {
				var item = this.collection ? {
					image: 'yishoucang@3x.png',
					name: '已收藏'
				} : {
					image: 'quxiaoshoucang@3x.png',
					name: '收藏'
				}
				var array = [item]
				var index = 0
				for (var item of this.buttons) {
					if (index > 0) {
						array.push(item)
					}
					index++
				}
				this.buttons = array
			}
		},
	}
</script>
<style scoped lang="scss">
	.bottom-buttons {
		z-index: 9999;
		.content-view {
			height: 104rpx;
			margin: 20rpx 24rpx 32rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 214rpx;

				.item-content {
					color: #8D8D8D;
					font-size: 20rpx;
					width: 64rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.image-view {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-shrink: 0;
					}

					.text-view {
						height: 24rpx;
						line-height: 24rpx;
					}
				}
			}

			.right-view {
				font-weight: bold;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #DF7922;
				border-radius: 16rpx;
				overflow: hidden;

				.cancel-button {
					width: 180rpx;
					margin-right: -28rpx;
					color: #DF7922;
					background: linear-gradient(-80deg, transparent 24rpx, #FFFFFF 0);
					height: 104rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.sure-button {
					width: 288rpx;
					color: #FFFFFF;
					background: linear-gradient(100deg, transparent 24rpx, #DF7922 0);
					height: 104rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>